<template>
  <div>
    <div v-for="(item, index) in bloodAttrs" :key="index">
      <div class="h12"></div>
      <el-divider content-position="left">
        <b class="color-primary font14">{{ item.name }}</b>
      </el-divider>
      <el-descriptions
        border
        :column="4"
        content-class-name="contentClass"
        label-class-name="labelClass"
        size="small"
      >
        <el-descriptions-item
          v-for="(citem, cindex) in item.data"
          :key="cindex"
          :label="citem.name"
        >
          <span v-if="citem.namekey === 'product'">
            {{ blood.product.name }}
          </span>
          <span v-else-if="citem.namekey === 'capacity'">
            {{ (+blood.capacity).toFixed(1) }}
          </span>
          <span v-else>{{ blood[citem.namekey] || '' }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <div class="h12"></div>
    </div>
  </div>
</template>

<script>
  import { bloodAttrs } from '@/utils/constant'
  export default {
    props: {
      blood: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        bloodAttrs,
      }
    },
    methods: {},
  }
</script>

<style lang="scss" scoped></style>
